import React, { useState } from 'react'
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";

const reorder = (list: any, startIndex: any, endIndex: any) => {
    const result = Array.from(list);
    const [removed] = result.splice(startIndex, 1);
    result.splice(endIndex, 0, removed);

    return result;
};

const grid = 8;

const getItemStyle = (isDragging: any, draggableStyle: any) => {
    console.log(draggableStyle)
    return {
        // some basic styles to make the items look a bit nicer
        userSelect: "none",

        padding: grid * 2,

        margin: `0 0 ${grid}px 0`,

        // change background colour if dragging
        background: isDragging ? "lightgreen" : "grey",

        // styles we need to apply on draggables
        ...draggableStyle
    }
};


const getListStyle = (isDraggingOver: boolean) => ({
    background: isDraggingOver ? "lightblue" : "lightgrey",
    padding: grid,
    width: 250
});

export default () => {
    const [datalist, setDataList] = useState(["a", "b", "c"])

    const onDragEnd = (result: any) => {
        if (!result.destination) {
            return;
        }

        const items: any = reorder(
            datalist,
            result.source.index,
            result.destination.index
        );

        setDataList(items)
    }
    return (
        <div>
            <DragDropContext onDragEnd={onDragEnd}>
                <Droppable droppableId="list">
                    {(provided: any, snapshot) => (
                        <div
                            ref={provided.innerRef}
                            {...provided.droppableProps}
                            style={getListStyle(snapshot.isDraggingOver)}
                        >
                            {
                                datalist.map((item: any, index: number) => {
                                    return (
                                        <Draggable key={index} draggableId={"drag" + index} index={index}>
                                            {(provided: any, snapshot: any) => (
                                                <div
                                                    ref={provided.innerRef}
                                                    {...provided.draggableProps}
                                                    {...provided.dragHandleProps}
                                                    style={getItemStyle(
                                                        snapshot.isDragging,
                                                        provided.draggableProps.style
                                                    )}
                                                //直接写style 拖拽不生效
                                                // style={{ height: "20px", backgroundColor: "gray", margin: "5px" }}
                                                >
                                                    {/* <div
                                                        style={{ height: "20px", backgroundColor: "gray", margin: "5px" }}
                                                    > */}
                                                        {item}
                                                    {/* </div> */}


                                                </div>
                                            )}
                                        </Draggable>
                                    )
                                })
                            }
                            {provided.placeholder}
                        </div>
                    )}
                </Droppable>
            </DragDropContext>
        </div>
    )
}